<template>
  <div class="category">
    <div class="container mx-auto py-8">
      <!-- Breadcrumb -->
      <div class="breadcrumb mb-6 text-sm">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ categoryName }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="flex space-x-6">
        <!-- Left Sidebar -->
        <aside class="w-1/5 flex-shrink-0">
          <CategorySidebar />
        </aside>

        <!-- Main Content -->
        <div class="flex-1 space-y-8">
          <!-- Sub Category Section: 毛衫 -->
          <section class="sub-category-section bg-white p-6 rounded-lg shadow-sm">
            <h2 class="text-xl font-semibold text-gray-800 mb-1">毛衫</h2>
            <p class="text-sm text-gray-500 mb-4">温暖柔软，品质之选</p>
            <div class="grid grid-cols-4 gap-4">
              <!-- Product Item -->
              <div v-for="product in sweaterProducts" :key="product.id" class="product-item bg-white border border-gray-200 rounded overflow-hidden hover:shadow-md transition-all duration-300 group">
                 <a href="#" class="block overflow-hidden h-48"> <!-- Link wrapper -->
                   <img :src="product.image" :alt="product.name" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                 </a>
                <div class="p-4 text-sm">
                  <a href="#"><p class="text-gray-700 truncate mb-1 group-hover:text-red-500">{{ product.name }}</p></a>
                  <p class="text-gray-500 truncate mb-2 h-8">{{ product.desc }}</p> <!-- Fixed height for desc -->
                  <p class="text-red-500 text-lg font-semibold">{{ formatPriceAuth(product.price, !!userStore.token, userStore.userInfo?.discount) }}</p>
                  <!-- Add discount tag if needed -->
                  <!-- <span class="inline-block bg-red-100 text-red-600 text-xs px-2 py-0.5 rounded ml-2">享9折</span> -->
                </div>
              </div>
            </div>
          </section>

          <!-- Sub Category Section: 外衣 -->
          <section class="sub-category-section bg-white p-6 rounded-lg shadow-sm">
             <h2 class="text-xl font-semibold text-gray-800 mb-1">外衣</h2>
             <p class="text-sm text-gray-500 mb-4">穿出时尚感</p>
            <div class="grid grid-cols-4 gap-4">
              <!-- Repeat product item structure -->
               <div v-for="product in outerwearProducts" :key="product.id" class="product-item bg-white border border-gray-200 rounded overflow-hidden hover:shadow-md transition-all duration-300 group">
                 <a href="#" class="block overflow-hidden h-48">
                   <img :src="product.image" :alt="product.name" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                 </a>
                <div class="p-4 text-sm">
                   <a href="#"><p class="text-gray-700 truncate mb-1 group-hover:text-red-500">{{ product.name }}</p></a>
                  <p class="text-gray-500 truncate mb-2 h-8">{{ product.desc }}</p>
                  <p class="text-red-500 text-lg font-semibold">{{ formatPriceAuth(product.price, !!userStore.token, userStore.userInfo?.discount) }}</p>
                </div>
              </div>
            </div>
          </section>

          <!-- Sub Category Section: T恤 -->
          <section class="sub-category-section bg-white p-6 rounded-lg shadow-sm">
             <h2 class="text-xl font-semibold text-gray-800 mb-1">T恤</h2>
             <p class="text-sm text-gray-500 mb-4">穿出时尚感</p>
            <div class="grid grid-cols-4 gap-4">
               <div v-for="product in tshirtProducts" :key="product.id" class="product-item bg-white border border-gray-200 rounded overflow-hidden hover:shadow-md transition-all duration-300 group">
                 <a href="#" class="block overflow-hidden h-48">
                   <img :src="product.image" :alt="product.name" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                 </a>
                <div class="p-4 text-sm">
                   <a href="#"><p class="text-gray-700 truncate mb-1 group-hover:text-red-500">{{ product.name }}</p></a>
                  <p class="text-gray-500 truncate mb-2 h-8">{{ product.desc }}</p>
                  <p class="text-red-500 text-lg font-semibold">{{ formatPriceAuth(product.price, !!userStore.token, userStore.userInfo?.discount) }}</p>
                </div>
              </div>
            </div>
          </section>

          <!-- Sub Category Section: 裤装 -->
          <section class="sub-category-section bg-white p-6 rounded-lg shadow-sm">
             <h2 class="text-xl font-semibold text-gray-800 mb-1">裤装</h2>
             <p class="text-sm text-gray-500 mb-4">高质感面料，休闲商务两相宜</p>
            <div class="grid grid-cols-4 gap-4">
               <div v-for="product in pantsProducts" :key="product.id" class="product-item bg-white border border-gray-200 rounded overflow-hidden hover:shadow-md transition-all duration-300 group">
                 <a href="#" class="block overflow-hidden h-48">
                   <img :src="product.image" :alt="product.name" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                 </a>
                <div class="p-4 text-sm">
                   <a href="#"><p class="text-gray-700 truncate mb-1 group-hover:text-red-500">{{ product.name }}</p></a>
                  <p class="text-gray-500 truncate mb-2 h-8">{{ product.desc }}</p>
                  <p class="text-red-500 text-lg font-semibold">{{ formatPriceAuth(product.price, !!userStore.token, userStore.userInfo?.discount) }}</p>
                </div>
              </div>
            </div>
          </section>

          <!-- Related Topics Section -->
          <RelatedTopics />

        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import CategorySidebar from './category/components/CategorySidebar.vue'
import RelatedTopics from './category/components/RelatedTopics.vue'
import { formatPriceAuth } from '@/lib/utils'
import { useUserStore } from '@/stores/user'

interface Product {
  id: number
  name: string
  desc: string
  price: number
  image: string
}

const route = useRoute()
const categoryId = computed(() => Number(route.params.id || 1))
const categoryName = computed(() => {
  const categories: Record<number, string> = { 1: '服装' }
  return categories[categoryId.value] || '服装'
})

const userStore = useUserStore()

const createProduct = (id: number, name: string, desc: string, price: number): Product => ({
  id,
  name,
  desc,
  price,
  image: 'https://via.placeholder.com/200x200/eee/999?text=Product'
});

const sweaterProducts = ref<Product[]>([...Array(8)].map((_, i) => createProduct(i + 1, '女式超柔软拉毛运动开衫', '匠心剪裁，垂感质地', 249)));
const outerwearProducts = ref<Product[]>([...Array(8)].map((_, i) => createProduct(i + 9, '女式超柔软拉毛运动开衫', '匠心剪裁，垂感质地', 249)));
const tshirtProducts = ref<Product[]>([...Array(8)].map((_, i) => createProduct(i + 17, '女式超柔软拉毛运动开衫', '匠心剪裁，垂感质地', 249)));
const pantsProducts = ref<Product[]>([...Array(8)].map((_, i) => createProduct(i + 25, '女式超柔软拉毛运动开衫', '匠心剪裁，垂感质地', 249)));
</script>

<style scoped>
.category {
  /* background-color: #f5f5f5; */ /* Inherited from body now */
}

.product-item a:hover p {
   color: #e1251b; /* Ensure link text turns red on hover */
}

/* Custom styles for breadcrumb to match target */
.breadcrumb ::v-deep(.el-breadcrumb__inner),
.breadcrumb ::v-deep(.el-breadcrumb__separator) {
  color: #666;
  font-weight: normal;
}
.breadcrumb ::v-deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #666; /* Target page last item is also gray */
}
.breadcrumb ::v-deep(.el-breadcrumb__inner a:hover) {
    color: #e1251b;
}
</style> 